<template>
    <el-dialog v-model="dialogVisible" :title="title" width="500" :before-close="handleClose">
        <slot></slot>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleSave">保存</el-button>
                <el-button type="primary" @click="handleCancel">退出</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

// 弹窗标题作为 prop 传入
const props = defineProps<{
    title?: string
}>()

// 使用 defineModel 来绑定外部控制 dialog 显隐
const dialogVisible = defineModel<boolean>('modelValue')

// 自定义关闭前逻辑
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('真的要退出吗？')
        .then(() => done())
        .catch(() => { })
}

// 外部也可以加事件监听
const emit = defineEmits(['save', 'cancel'])

const handleSave = () => {
    emit('save')
    dialogVisible.value = false
}
const handleCancel = () => {
    emit('cancel')
    dialogVisible.value = false
}
</script>